<template>
  <div class="project-management-view">
    <h1>项目管理</h1>
    <transition name="fade">
      <router-view v-if="$route.meta.showChildren"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'ProjectManagement'
}
</script>

<style scoped>
.project-management-view {
  max-width: 800px;
  margin: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0; 
}

/* 默认隐藏子条目 */
.router-view {
  visibility: hidden;
}

/* 添加悬停效果 */
.project-management-view:hover .router-view {
  visibility: visible;
}

/* 添加过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>